<template>
  <div class="searchPage-body-inner-left-articles">
    <div class="searchPage-body-inner-left-articles-navbar">
       <div class="searchPage-body-inner-left-articles-navbar-left">
         <a>综合</a>
         <a>最新</a>
         <a>热门</a>
       </div>
      <div class="searchPage-body-inner-left-articles-navbar-right">
          <p>相关结果约 {{$store.state.searchList.length}}个</p>
      </div>
    </div>
    <div class="searchPage-body-inner-left-article" v-for="article in  $store.state.searchList" :key="article.articleId" >
      <div class="article-title">
        <a :href="'/articleDetail.html?articleid='+article.articleId" target="_blank" v-html="fn(article.title,$store.state.searchContent)">
        </a>
      </div>
      <div class="article-content" v-html="fn(article.content.substring(0,140),state.searchContent)+'.......'">
      </div>
      <div class="article-footer">
        <div  class="article-footer-left">
          <div>
            <img src="@/assets/icon/眼睛.svg" width="25px">
            <span style="margin-left: 8px">1.6万+</span>
          </div>
          <div style="line-height: 20px">
            <img src="@/assets/icon/点赞.svg" width="20px">
            <span style="margin-left: 8px" >1.6万+</span>
          </div>
          <div>
            <img src="@/assets/icon/评论.svg" width="16px" style="opacity: 0.7">
            <span style="margin-left: 8px">1.6万+</span>
          </div>
        </div>
        <div  class="article-footer-right">
          <a href="">{{article.account}}</a>
          <span style="float: right">
                  {{article.createTime}}
                </span>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "BlogArticles",
  data(){
    return{
      state:{

      }
    }
  },
  methods: {
    fn(content, target) {
      let nt = '<span style="color:#fd5531">' + target + '</span>';
      return content.replace(new RegExp(target, "ig"), nt) + '&nbsp;';

    },
  },
  mounted() {
    this.state=this.$store.state;
  }

}
</script>

<style>
.searchPage-body-inner-left-articles{
  width: 100%;
  height: 100%;
  padding: 0px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}
.searchPage-body-inner-left-articles-navbar{
  display: flex;
  width: 1000px;
  height:40px ;
  justify-content: space-between;
}
.searchPage-body-inner-left-articles-navbar-left{
  width: 220px;
  display: flex;
  line-height: 40px;
  justify-content: space-around;
  font-size: 14px;
}
.searchPage-body-inner-left-articles-navbar-right{
  width: 102px;
  font-size: 12px;
  line-height: 40px;
}
.searchPage-body-inner-left-article{
  height: 131px;
  padding: 16px 24px 16px 24px;
  display: flex;
  flex-direction: column;
}
.article-title{
  width: 100%;
  height: 22px;
}
.article-title a{
  color: black;
  text-decoration: none;
}
.article-title a:hover{
  color: #fd5531;
}
.article-content{
  width: 100%;
  height: 48px;
  font-size: 14px;
  opacity: 0.8;
}
.article-footer{
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 8px;
}
.article-footer-left{
  width: 250px;
  float: left;
  height: 20px;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.article-footer-left div{
  display: flex;
}
.article-footer-right{
  width: 200px;
  float: right;
  height: 100%;

}

</style>